<template>
    <div class="layout-route">
        <div class="card card-search">
            <el-form :model="queryParams" ref="queryForm" v-show="showSearch" inline label-width="100px">
                <el-form-item label="订单号" prop="order_id">
                    <el-input type="textarea" :rows="4" v-model="queryParams.order_id" placeholder="请输入订单号" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item label="关键字" prop="keyword">
                    <el-input v-model.trim="queryParams.keyword" placeholder="请输入关键字" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item label="SKU" prop="sku">
                    <el-input v-model.trim="queryParams.sku" placeholder="请输入SKU" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item label="渠道标签" prop="tag_source">
                    <el-select v-model="queryParams.tag_source" placeholder="请选择渠道标签" clearable size="small" style="width: 240px">
                        <el-option v-for="item in dict.channelLabelList" :key="item.value" :label="item.label" :value="item.value">
                            <span style="float: left">{{ item.label }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="运营标签" prop="tag_campaign">
                    <el-select v-model="queryParams.tag_campaign" placeholder="请选择运营标签" clearable size="small" style="width: 240px">
                        <el-option v-for="item in dict.operationLabelList" :key="item.value" :label="item.label" :value="item.value">
                            <span style="float: left">{{ item.label }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始时间" prop="createtime">
                    <el-date-picker v-model="queryParams.createtime" format="yyyy-MM-dd" type="daterange"  start-placeholder="开始日期" end-placeholder="结束日期" style="width: 240px"></el-date-picker>
                </el-form-item>
                <el-form-item label=" ">
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="card">
            
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" plain icon="el-icon-download" :loading="download" :disabled="download" @click="handleExport">导出订单</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="primary" plain @click="showSourceListDialog('sku')">按sku查看销售业绩</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="primary" plain @click="showSourceListDialog('source')">按渠道查看销售业绩</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="primary" plain @click="showAdvertisingDialog">按id查询附加信息</el-button>
                </el-col>
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>
            <el-tabs v-model="activeTab" @tab-click="handleStatus" type="border-card">
                <el-tab-pane v-for="(item, index) in status" :key="index" :label="item.label" :name="item.value.toString()"> </el-tab-pane>
            </el-tabs>
            <div class="table-wrap">
                <el-table v-loading="loading" :data="tableData" border script>
                    <el-table-column prop="name" label="订单" min-width="120">
                        <template slot-scope="scope">
                            <p>
                                订单号:<span style="font-weight: bold">{{ scope.row.name }}</span>
                            </p>
                            <p>
                                现销售额:<span style="font-weight: bold">{{ scope.row.total_price }}</span>
                            </p>
                            <p>
                                订单状态:<span style="font-weight: bold">{{ scope.row.financial_status | formatLabelByValueFuzzy(dict.FINANCIAL_STATUS) }}</span>
                            </p>
                            <p>
                                时间:<span style="font-weight: bold">{{ scope.row.created_at }}</span>
                            </p>
                            <p>
                                SKU:<span style="font-weight: bold">{{ scope.row.skus }}</span>
                            </p>
                        </template>
                    </el-table-column>

                    <el-table-column label="匹配状态" prop="status" width="100">
                        <template slot-scope="scope">
                            {{ scope.row.status | formatLabelByValueFuzzy(dict.STATUS_LIST) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="shopifyAPI来源" min-width="240">
                        <template slot-scope="scope">
                            <p>
                                firstVisit_source:<span style="font-weight: bold">{{ scope.row.firstVisit_source }}</span>
                            </p>
                            <p>
                                firstVisit_campaign:<span style="font-weight: bold">{{ scope.row.firstVisit_campaign }}</span>
                            </p>
                            <p>
                                lastVisit_source:<span style="font-weight: bold">{{ scope.row.lastVisit_source }}</span>
                            </p>
                            <p>
                                lastVisit_campaign:<span style="font-weight: bold">{{ scope.row.lastVisit_campaign }}</span>
                            </p>
                            <p>landingSite:<span style="font-weight: bold" v-html="scope.row.landing_site"></span></p>
                        </template>
                    </el-table-column>
                    <el-table-column label="辅助插件来源" min-width="240">
                        <template slot-scope="scope">
                            <p>
                                last_source:<span style="font-weight: bold">{{ scope.row.last_source }}</span>
                            </p>
                            <p>
                                last_campaign:<span style="font-weight: bold">{{ scope.row.last_campaign }}</span>
                            </p>
                            <p>
                                first_source:<span style="font-weight: bold">{{ scope.row.first_source }}</span>
                            </p>
                            <p>
                                first_campaign:<span style="font-weight: bold">{{ scope.row.first_campaign }}</span>
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="渠道标签" prop="tag_source" min-width="120">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.tag_source" placeholder="请选择" clearable size="small" @change="chooseItem(scope.row)">
                                <el-option v-for="item in dict.channelLabelList" :key="item.value" :label="item.label" :value="item.value">
                                    <span style="float: left">{{ item.label }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="运营标签" prop="tag_campaign" min-width="120">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.tag_campaign" placeholder="请选择" clearable size="small" @change="chooseItem(scope.row)">
                                <el-option v-for="item in dict.operationLabelList" :key="item.value" :label="item.label" :value="item.value">
                                    <span style="float: left">{{ item.label }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="原标签参考" prop="tags" width="140">
                        <template slot-scope="scope">
                            <div>
                                <p>
                                    <span style="font-weight: bold; color: #4b26a7">{{ scope.row.tags }}</span>
                                </p>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <pagination v-show="total > 0" :total="total" :page.sync="pageInfo.page" :limit.sync="pageInfo.limit" @pagination="getList"></pagination>
        </div>
        <div class="tool-box">
            <el-button type="primary" plain icon="el-icon-plus" :loading="save" :disabled="save" @click="submit">提交批量修改</el-button>
        </div>

        <source-list-dialog v-model="dialog.visible" v-if="dialog.visible" :params="dialog.data" :type="dialog.type"></source-list-dialog>
        <advertising-dialog v-model="advertisingDialog.visible" v-if="advertisingDialog.visible"></advertising-dialog>
    </div>
</template>

<script>
import { queryWomenList, getOperationLabelList, getChannelLabelList, editOrderSource, exportOrder } from '@/api/orderSource'
import { STATUS_LIST, FINANCIAL_STATUS } from './constant'
import { parseTime } from '@/utils/quickadmin'
import { exportFile } from '@/utils/index'
import SourceListDialog from './components/SourceListDialog'
import AdvertisingDialog from './components/AdvertisingDialog.vue'
export default {
    name: 'OrderSourceList',
    components: { SourceListDialog, AdvertisingDialog },
    data() {
        return {
            dialog: {
                visible: false,
                data: {},
                type: ''
            },
            advertisingDialog: {
                visible: false,
            },
            // 遮罩层
            loading: true,
            download: false,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            tableData: [],
            dict: {
                channelLabelList: [],
                operationLabelList: [],
                STATUS_LIST: STATUS_LIST,
                FINANCIAL_STATUS: FINANCIAL_STATUS,
            },
            pageInfo: {
                page: 1,
                limit: 10,
            },
            // 查询参数
            queryParams: {
                order_id: undefined,
                sku: undefined,
                tag_source: undefined,
                tag_campaign: undefined,
                createtime: [],
                keyword: undefined,
            },
            checkList: [],
            save: false,

            status: [
                { label: '全部', value: '' },
                { label: '未匹配', value: 'unmatched' },
                { label: '匹配成功', value: 'matched' },
                { label: '匹配失败', value: 'matching_failed' },
                { label: '手动修改标签', value: 'manually_modifying' },
                { label: 'fb', value: 'fb' },
                { label: 'tt', value: 'tt' },
                { label: 'ggad', value: 'ggad' },
                { label: '直接访问', value: 'direct_access' },
                { label: 'email', value: 'email' },
                { label: 'other', value: 'other' },
                { label: '联盟网红', value: 'AllianceInternetCelebrity' },
                { label: '待确认', value: '待确认' },
            ],
            activeTab: '',
        }
    },
    async created() {
        this.loading = true
        try {
            const operationData = await getOperationLabelList()
            this.dict.operationLabelList = operationData?.data ?? []
            const channelData = await getChannelLabelList()
            this.dict.channelLabelList = channelData?.data ?? []
        } catch (error) {
            this.loading = false
            console.log(error)
        }
        this.getList()
    },
    methods: {
        showAdvertisingDialog() {
            this.advertisingDialog.visible = true
        },
        showSourceListDialog( type){
            this.dialog.visible = true
            this.dialog.data = {
                channelLabelList: this.dict.channelLabelList,
                operationLabelList: this.dict.operationLabelList
            }
            this.dialog.type = type
        },
        chooseItem(row) {
            const index = this.checkList.findIndex(item => item.id == row.id)
            const data = {
                id: row.id,
                tag_campaign: row.tag_campaign,
                tag_source: row.tag_source,
            }
            if (index == -1) {
                this.checkList.push(data)
            } else {
                this.checkList.splice(index, 1, data)
            }
        },
        submit() {
            if (!this.checkList.length) {
                return this.$message.warning('请先修改标签信息')
            }
            this.$confirm('是否确认批量修改？', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    this.save = true
                    editOrderSource(this.checkList)
                        .then(res => {
                            this.$message.success(res.msg)
                            this.getList()
                        })
                        .finally(() => {
                            this.save = false
                        })
                })
                .catch(() => {})
        },
        handleExport() {
            this.download = true
            const qyparams = {
                ...this.pageInfo,
                ...this.queryParams,
            }
            if (qyparams.createtime?.length == 2) {
                qyparams.createtime = [parseTime(qyparams.createtime[0], 'y-m-d'), parseTime(qyparams.createtime[1], 'y-m-d')]
            }
            exportOrder(qyparams)
                .then(res => {
                    console.log(res)
                    exportFile(res, () => {
                        this.download = false
                    })
                })
                .catch(err => {
                    console.log(err)
                    this.download = false
                })
        },
        //列表
        getList() {
            this.loading = true
            const qyparams = {
                ...this.pageInfo,
                ...this.queryParams,
            }
            if (qyparams.createtime?.length == 2) {
                qyparams.createtime = [parseTime(qyparams.createtime[0], 'y-m-d'), parseTime(qyparams.createtime[1], 'y-m-d')]
            }
            queryWomenList(qyparams)
                .then(response => {
                    this.tableData = response.data.list
                    this.total = response.data.total
                })
                .finally(() => {
                    this.loading = false
                })
        },

        // 搜索按钮操作
        handleQuery() {
            this.pageInfo.page = 1
            this.getList()
        },

        // 重置按钮操作
        resetQuery() {
            this.resetForm('queryForm')

            this.handleQuery()
        },
        handleStatus(tab) {
            this.queryParams.status = tab.name
            this.getList()
        },
    },
}
</script>
<style scoped>
.tool-box {
    position: fixed;
    right: 0;
    top: 40%;
    background: transparent;
    padding: 12px;
    z-index: 99999;
}
.el-tabs--border-card {
    box-shadow: none;
    border-bottom: 0;
}

::v-deep .el-tabs .el-tabs__content {
    padding: 0;
    border-bottom: 0;
}
.table-wrap {
    padding: 15px;
    border-bottom: 1px solid #dfe4ed;
    border-left: 1px solid #dfe4ed;
    border-right: 1px solid #dfe4ed;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
</style>
